<!-- 课程管理 -->
<template>
 <div>
   <course-detail v-if="showDetail&&courseInfoId" :courseInfoId="courseInfoId" @changeShowDetail="changeShowDetail"></course-detail>
   <div v-else>
    <el-form
      :inline="true"
      label-width="80px"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item>
        <el-input v-model="course_name" placeholder="课程名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="teacher_name" placeholder="教师名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column
        header-align="center"
        align="center"
        prop="course_number"
        label="课程编号"
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="course_name"
        label="课程名称"
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="teacher_name"
        label="教师名称"
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="email"
        label="教师邮箱"
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="join_time"
        label="加入课程时间"
      >
      </el-table-column>
      <el-table-column header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text"  @click="getCourseId(scope.row.course_info_id)">查看课程详情</el-button> 
          <el-button type="text" style="color:#f56c6c;" @click="deleteCourse(scope.row.course_info_id)">退课</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @sizeChange="sizeChangeHandle"
      @currentChange="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      layout="total,sizes,prev, pager, next,jumper"
      :total="totalPage"
    >
    </el-pagination>
  </div>
 </div>
 
</template>

<script>
import CourseDetail from './course-detail.vue';
export default {
  components:{CourseDetail},
  data() {
    return {
      totalPage: 0,
      pageIndex: 1,
      pageSize: 10,
      course_name: "",
      teacher_name: "",
      tableData: [],
      courseInfoId:"",
      showDetail:false,
    };
  },
  activated() {
    this.getDataList();
  },
  methods: {
    //获得数据列表
    getDataList() {
      this.$http({
        url: this.$http.adornUrl("/stu/courseManage/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          course_name: this.course_name,
          teacher_name: this.teacher_name,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.tableData = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.$message(data.msg);
        }
      });
    },
    //每页数
    sizeChangeHandle(val) {
      this.pageIndex = 1;
      this.pageSize = val;
      this.getDataList();
    },
    //当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    //删除课程
    deleteCourse(id) {
      this.$confirm("你确定要删除该门课吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl("/stu/courseManage/deleteCourse"),
          method: "post",
          data: this.$http.adornData({
            courseInfoId: id,
          }),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              },
            });
          } else {
            this.$message(data.msg);
          }
        });
      });
    },
    //获得点击课程的id
      getCourseId(param){
          this.courseInfoId = param;
          console.log(param)
          this.showDetail = true
      },

     //改变showDetail
      changeShowDetail(){
        this.showDetail = false
      }

  },
};
</script>

<style  scoped>

</style>
